<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters"  ref="filters" label-width="80px">
                <el-form-item prop="apply_name">
                    <el-input v-model="filters.apply_name" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <el-form-item prop="status">
                    <el-select
                            placeholder="审核状态" v-model="filters.status" size="18px">
                        <el-option :key="-1" label="全部" value=""></el-option>
                        <el-option :key="key" :label="item" :value="key"
                                   v-for="(item,key) in options.unit_sign_up_audit_status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>


        <!--搜索结果表格-->
        <el-table
                :header-row-style="headerRowStyle"
                :data="tableData"
                stripe
                v-loading="listLoading"
                style="width: 100%;">
            <el-table-column
                    label="序号"
                    type="index"
                    width="70"
                    align="center">
            </el-table-column>

            <el-table-column
                    align="left"
                    label="单位名称"
                    prop="apply_name"/>
            <el-table-column
                    align="center"
                    label="所在省市"
                    prop="provinces">
                <template slot-scope="scope">
                    {{ scope.row.provinces }} {{ scope.row.city ? '/' : '' }} {{ scope.row.city  }}
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="申请人"
                    prop="full_name" >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="部门"
                    prop="belong_unit" >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="职务"
                    prop="title" >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="申请时间"
                    prop="gmt_modified" >
            </el-table-column>
            <el-table-column
                    align="center"
                    label="状态"
                    prop="status"
                    :formatter="formatterStatus">
            </el-table-column>

            <el-table-column label="操作"
                             align="center">
                <template slot-scope="scope">
                    <el-button
                            v-if="scope.row.status == 0"
                            type="primary"
                            @click="auditView(scope.row, false)">审核
                    </el-button>
                    <el-button
                            v-else-if="scope.row.status == 1 || scope.row.status == 2"
                            type="primary"
                            plain
                            @click="auditView(scope.row, true)">详情
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>

        <el-dialog
                title="申请信息详情"
                class="audit-dialog"
                :visible.sync="auditDialog"
                width="45%"
                v-loading="auditStatus"
                :before-close="handleClose">
            <!-- 教育主管部门 -->
            <el-form
                    :inline="true"
                    :model="signFormData"
                    label-position="top"
                    class="demo-form-inline"
                    :rules="ruleFormSign"
                    ref="univForm"
            >
                <div v-if="signFormData.type == 2">
                    <el-form-item label="教育主管部门名称"  prop="apply_name" style="width:80%;">
                        <el-input :disabled="editStatus && signFormData.status != 0" v-model="signFormData.apply_name" placeholder="请输入教育主管部门名称"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item prop="provinces" label="所在省市">
                       <!-- <el-select
                                :disabled="editStatus && signFormData.status != 0"
                                placeholder="所在省份"
                                v-model="signFormData.provinces"
                                size="18px">
                            <el-option
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                    v-for="item in dict.provinces" />
                        </el-select>-->
                        <el-cascader
                                placeholder="请选择所在省市"
                                :disabled="editStatus && signFormData.status != 0"
                                v-model="selecetProvincCity"
                                :options="dict.provinc_city"
                                :props="provincCityProps"
                                @change="provincCityChange"></el-cascader>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                </div>
                <div v-else>
                    <el-form-item prop="belong"  label="高校所属">
                        <el-select
                                :disabled="editStatus && signFormData.status != 0"
                                placeholder="请选择高校所属" v-model="signFormData.belong" size="12px">
                            <el-option :key="item.key" :label="item.value" :value="item.key"
                                       v-for="item in dict.univ_department"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="其他部委名称"  prop="other_belong" v-if="signFormData.belong == 4">
                        <el-input  :disabled="editStatus && signFormData.status != 0"  v-model="signFormData.other_belong" placeholder="请输入其他部委名称"></el-input>
                    </el-form-item>
                    <el-form-item label="高校名称"  prop="apply_name">
                        <el-input  :disabled="editStatus && signFormData.status != 0"  v-model="signFormData.apply_name" placeholder="请输入高校名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="arts_type" label="高校类型">
                        <el-select
                                :disabled="editStatus && signFormData.status != 0"
                                placeholder="请选择高校类型" v-model="signFormData.arts_type" size="12px">
                            <el-option :key="item.key" :label="item.value" :value="item.key"
                                       v-for="item in dict.univ_pro"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="provinces" label="所在省市">
                        <el-cascader
                                placeholder="请选择所在省市"
                                :disabled="editStatus && signFormData.status != 0"
                                v-model="selecetProvincCity"
                                :options="dict.provinc_city"
                                :props="provincCityProps"
                                @change="provincCityChange"></el-cascader>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label="姓名"  prop="full_name">
                    <el-input  :disabled="editStatus && signFormData.status != 0" v-model="signFormData.full_name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="所属部门"  prop="belong_unit">
                    <el-input  :disabled="editStatus && signFormData.status != 0" v-model="signFormData.belong_unit" placeholder="请输入所属部门"></el-input>
                </el-form-item>
                <el-form-item label="职务"  prop="title">
                    <el-input  :disabled="editStatus && signFormData.status != 0" v-model="signFormData.title" placeholder="请输入职务"></el-input>
                </el-form-item>
                <el-form-item label="手机号码"  prop="telephone">
                    <el-input  :disabled="editStatus && signFormData.status != 0" v-model="signFormData.telephone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="邮箱"  prop="email">
                    <el-input  :disabled="editStatus && signFormData.status != 0" v-model="signFormData.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="signFormData.status == 0" type="danger"  @click="auditSingUp(2)"> 忽略 </el-button>
                <el-button v-if="signFormData.status == 0" type="primary"  @click="auditSingUp(1)"> 通过 </el-button>
                <el-button v-else @click="handleClose"> 取消 </el-button>
              </span>
        </el-dialog>
    </section>
</template>

<script>
    import { unitSingUpList, upDateUnitSignStatus, unitSingUpUpdate } from '../../api/unit_sign_up_api';
    import dict from '../../common/js/dict';
    export default {
        data() {
            var validEmail = (rule,value,callback) => {
                let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
                if(!reg.test(value)){
                    callback(new Error("请输入正确邮箱格式"));
                }else{
                    callback();
                }
            }
            var validTelephone = (rule, value, callback) => {
                let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                }
            };
            return {
                dict:dict,
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center"
                },
                selecetProvincCity:[],
                provincCityProps:{
                    value:'name',
                    label:'name',
                    children:'city'
                },
                auditDialog: false,
                listLoading: false,
                auditStatus: false,
                editStatus: false,
                //表格数据
                tableData: [],
                signFormData: { },
                filters: {
                    apply_name: '',
                    status: ''
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                options: {
                    unit_sign_up_audit_status:dict.unit_sign_up_audit_status,
                },
                ruleFormSign: {
                    belong_unit: [
                        {required: true, message: '所属部门为必填项', trigger: 'blur'},
                        {min: 0, max: 20, message: '不超过20个字符', trigger: 'change'}
                    ],
                    email: [
                        {required: true, message: '邮箱为必填项', trigger: 'blur'},
                        {validator: validEmail, trigger: 'blur'}
                    ],
                    telephone: [
                        {required: true, message: '手机号码为必填项', trigger: 'blur'},
                        {validator: validTelephone, trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '职务为必填项', trigger: 'blur'},
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    full_name: [
                        {required: true, message: '姓名为必填项', trigger: 'blur'},
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    other_belong: [
                        {required: true, message: '其他部委为必填项', trigger: 'blur'},
                        {min: 0, max: 10, message: '不超过10个字符', trigger: 'change'}
                    ],
                    apply_name: [
                        {required: true, message: '名称为必填项', trigger: 'blur'},,
                        {min: 0, max: 30, message: '不超过30个字符', trigger: 'change'}
                    ],
                    provinces: [
                        {required: true, message: '所在省市为必选项', trigger: 'change'},
                    ],
                    belong: [
                        {required: true, message: '高校所属为必选项', trigger: 'change'},
                    ],
                    arts_type: [
                        {required: true, message: '高校类型为必选项', trigger: 'change'},
                    ]
                },
            }
        },
        methods: {
            provincCityChange(val){
                this.signFormData.provinces = val[0]
                this.signFormData.city = val[1]
            },
            handleClose() {
                this.$refs['univForm'].clearValidate()
                this.$nextTick(()=>{
                    this.signFormData = {}
                    this.selecetProvincCity = []
                    this.auditDialog = false
                })
            },
            // 注册状态
            formatterStatus(row){
                return this.options.unit_sign_up_audit_status[row.status];
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_current = 1;
                this.pager.page_size = val;
                this.getListData();
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pager.page_current = val;
                this.getListData();
            },
            search(){
                this.pager.page_current = 1;
                this.getListData();
            },
            auditChangeStatus(status){
                let params = {
                    id:this.signFormData.id,
                    status
                }
                upDateUnitSignStatus(params).then(res => {
                    this.auditStatus = false
                    if (res.data.status == 200) {
                        this.auditDialog = false
                        this.$message.success('审核成功');
                        this.getListData()
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                })
            },
            auditSingUp(status){
                this.auditStatus = true
                let params = Object.assign({},this.signFormData)
                this.$delete(params,'update_user_id')
                this.$delete(params,'create_user_id')
                unitSingUpUpdate(params).then(res => {
                    if (res.data.status == 200) {
                        this.auditChangeStatus(status)
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.auditStatus = false
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                })
            },
            auditView(row, status){
                this.auditDialog = true
                this.editStatus = status
                this.signFormData =  Object.assign({},row)
                this.selecetProvincCity = [row.provinces, row.city]
                this.$nextTick(()=>{
                    this.$refs['univForm'].clearValidate()
                })
            },
            getListData(){
                this.listLoading = true;  //显示loading
                let condition ={ ...this.filters }
                    if(condition.status != '')
                        condition.status = Number(condition.status)
                let params = {
                    page_size: this.pager.page_size,
                    page_current: this.pager.page_current,
                    order_column:"gmt_modified",
                    order_by:"desc",
                    condition: Object.assign({},condition)
                };
                unitSingUpList(params).then((res) => {
                    if (res.data.status == 200) {
                        this.listLoading = false;  //隐藏loading
                        let result = JSON.parse(res.data.datas);
                        this.tableData = result.items
                        this.pager.total = result.total;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            },
            reset(){
                this.$refs['filters'].resetFields();
                this.pager.page_current = 1;
                this.getListData();
                },

            //初始化页面
            initData() {
                this.getListData();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style>
    .audit-dialog .el-form--label-top .el-form-item__label {
        padding-bottom:0;
        line-height: 32px;
    }
</style>
<style scoped>

</style>
